<template>
  <div class="my-button" :class="classname" @click="handleClick">
    {{ text }}
  </div>
</template>
<script>
export default {
  // 通过props定义属性，用于接收从父组件传递过来的值
  // 传递过来的属性名可以自己定义
  // props: ['text', 'type'],

  // 上面的props写法，只适用于简单的数据传递，对于更严谨的传递数据，需要采用下面写法
  props: {
    text: {
      type: String,
      default: '默认按钮',
      required: true
    },
    type: {
      // 上面的type表示属性的名字，下面的type表示这个属性的类型
      type: String,
      default: 'default',
      // 通过validator属性进行校验
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['default', 'primary', 'success', 'warning', 'info'].indexOf(value) !== -1
      }
    }
  },
  methods: {
    handleClick () {
      console.log('点击了按钮')
    }
  },
  computed: {
    classname () {
      // 根据传递过来的type的值，计算得到一个新的类名
      return `my-button--${this.type}`
    }
  }
}
</script>
<style lang="less">
// 指定样式为less
.my-button {
  color: white;
  width: 80px;
  line-height: 40px;
  padding: 0 10px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
}
.my-button--default {
  color: black;
  border: 1px solid #000;
}
.my-button--primary {
  background-color: blue;
}
.my-button--success {
  background-color: green;
}
.my-button--info {
  background-color: gray;
}
.my-button--warning {
  background-color: orange;
}
</style>
